<page-header title="活动详情" [breadcrumb]="breadcrumb" [back]="true">
  <ng-template #breadcrumb>
    <ql-breadcrumb>
      <ql-breadcrumb-item>营销管理</ql-breadcrumb-item>
      <ql-breadcrumb-item>活动管理</ql-breadcrumb-item>
      <ql-breadcrumb-item>活动详情</ql-breadcrumb-item>
    </ql-breadcrumb>
  </ng-template>
</page-header>

<page-container>
  <tab-container>
    <tab-item title="活动信息">
      <ql-card header="基本信息">
        <label-container column="2" [border]="true" labelWidth="140">
          <label-item label="活动名称">{{ activity?.name }}</label-item>
          <label-item label="活动开始时间">{{ activity?.startTime }}</label-item>
          <label-item label="活动结束时间">{{ activity?.endTime }}</label-item>
          <label-item label="监测开始时间">{{ activity?.monitorStartTime }}</label-item>
          <label-item label="监测结束时间">{{ activity?.monitorEndTime }}</label-item>
          <label-item label="渠道选择">{{ activity?.channel }}</label-item>
          <label-item label="资金预算">{{ activity?.budget }}元</label-item>
          <label-item label="关键字" column="2" *ngIf="activity?.keywords">
            <div class="row">
              <ql-tag class="ql-margin-x" *ngFor="let keyword of activity.keywords.split(' ')">{{ keyword }}</ql-tag>
            </div>
          </label-item>
          <label-item label="活动内容" column="2">
            {{ activity?.context }}
          </label-item>
        </label-container>
      </ql-card>
      <ql-card header="营销要求">
        <label-container column="2" [border]="true" *ngIf="activity.activityClaim">
          <ng-container *ngFor="let item of activity.activityClaim">
            <label-item label="日期">{{ item.date }}</label-item>
            <label-item label="成功率">{{ item.value }}%</label-item>
          </ng-container>
        </label-container>
      </ql-card>
      <ql-card header="活动事件">
        <data-table [model]="eventList">
          <ql-table-column model-key="eventType" label="事件类型"> </ql-table-column>
          <ql-table-column model-key="eventName" label="事件名称"> </ql-table-column>
        </data-table>
      </ql-card>
      <ql-card header="广告页面">
        <data-table [model]="adList">
          <ql-table-column model-key="eventType" label="事件类型"> </ql-table-column>
          <ql-table-column model-key="eventName" label="事件名称"> </ql-table-column>
        </data-table>
      </ql-card>
      <ql-card header="活动产品">
        <data-table [model]="productList">
          <ql-table-column model-key="productCode" label="产品编号"> </ql-table-column>
          <ql-table-column model-key="productName" label="产品名称"> </ql-table-column>
          <ql-table-column model-key="productType" label="产品类型"> </ql-table-column>
        </data-table>
      </ql-card>
      <ql-card header="活动用户">
        <data-table [model]="customerList">
          <ql-table-column model-key="ctCode" label="客户编号"> </ql-table-column>
          <ql-table-column model-key="ctName" label="客户姓名"> </ql-table-column>
          <ql-table-column model-key="ctsex" label="性别" width="80"> </ql-table-column>
          <ql-table-column model-key="ctage" label="年龄" width="80"> </ql-table-column>
          <ql-table-column model-key="ctType" label="客户类型"> </ql-table-column>
          <ql-table-column model-key="ctLevel" label="客户等级"> </ql-table-column>
          <ql-table-column model-key="ctTel" label="客户电话"> </ql-table-column>
          <ql-table-column model-key="time" label="开户时间"> </ql-table-column>
        </data-table>
      </ql-card>
      <ql-card header="活动权益">
        <data-table [model]="interestList">
          <ql-table-column model-key="type" label="权益类型"></ql-table-column>
          <ql-table-column model-key="name" label="权益名称"></ql-table-column>
          <ql-table-column model-key="chargeOffType" label="核销方式"></ql-table-column>
          <ql-table-column model-key="company" label="提供服务商"></ql-table-column>
          <ql-table-column model-key="upTime" label="上架时间"></ql-table-column>
          <ql-table-column model-key="count" label="权益总数量"></ql-table-column>
          <ql-table-column model-key="lastCount" label="剩余可用数量"></ql-table-column>
          <ql-table-column model-key="expireTime" label="到期时间"></ql-table-column>
        </data-table>
      </ql-card>
    </tab-item>
    <tab-item title="活动阶梯">
      <ql-collapse>
        <ql-collapse-item *ngFor="let item of ladderList" [label]="item.startTime + ' - ' + item.endTime">
          <ql-card header="营销要求">
            <label-container>
              <ng-container *ngFor="let targetItem of item.activityTarget">
                <label-item [label]="targetItem.type">{{ targetItem.value }}</label-item>
              </ng-container>
            </label-container>
          </ql-card>
          <ql-card header="产品列表">
            <data-table [model]="item.productList">
              <ql-table-column model-key="productCode" label="产品编号"> </ql-table-column>
              <ql-table-column model-key="productName" label="产品名称"> </ql-table-column>
              <ql-table-column model-key="productType" label="产品类型"> </ql-table-column>
            </data-table>
          </ql-card>
          <ql-card header="权益列表">
            <data-table [model]="item.interestList">
              <ql-table-column model-key="type" label="权益类型"></ql-table-column>
              <ql-table-column model-key="name" label="权益名称"></ql-table-column>
              <ql-table-column model-key="chargeOffType" label="核销方式"></ql-table-column>
              <ql-table-column model-key="company" label="提供服务商"></ql-table-column>
              <ql-table-column model-key="upTime" label="上架时间"></ql-table-column>
              <ql-table-column model-key="count" label="权益总数量"></ql-table-column>
              <ql-table-column model-key="lastCount" label="剩余可用数量"></ql-table-column>
              <ql-table-column model-key="expireTime" label="到期时间"></ql-table-column>
            </data-table>
          </ql-card>
        </ql-collapse-item>
      </ql-collapse>
    </tab-item>
    <tab-item title="活动目标">
      <label-container column="2" [border]="true" *ngIf="activity?.activityTarget">
        <ng-container *ngFor="let item of activity.activityTarget">
          <label-item label="目标类型">{{ item.type }}</label-item>
          <label-item label="目标值">{{ item.value }}</label-item>
        </ng-container>
      </label-container>
    </tab-item>
  </tab-container>
</page-container>
